/**
 * @Author: ls <ls-mac>
 * @Date:   2019-08-11 17:39:20
 * @Last modified by:   ls-mac
 * @Last modified time: 2019-09-24 04:27:12
 */

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import common from 'utils/common';
import {
  Alert,
  Row,
  Col,
  Card,
  Checkbox,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Popover,
  Popconfirm,
  TimePicker,
  Table,
  Modal,
  message,
  Badge,
  Divider,
  Upload,
} from 'antd';
import SimpleTable from 'components/SimpleTable';
import { relative } from 'path';
import styles from './enterprise.less';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;

const CheckboxGroup = Checkbox.Group;

const InputGroup = Input.Group;

const TextArea = Input.TextArea;

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const { Option } = Select;

@connect(({ companyStorePage, loading }) => ({
  companyStorePage,
  loading: loading.models.companyStorePage,
}))
@Form.create()
export default class TableList extends PureComponent {
  state = {};

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'companyStorePage/companyStorePage',
      payload: {
        name: '',
        pageIndex: '1',
        pageSize: '10',
      },
    });
  }

  // 分页
  handleStandardTableChange = pagination => {
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      };
      const params = {
        pageIndex: pagination.current,
        pageSize: pagination.pageSize,
        name: values.name,
      };

      dispatch({
        type: 'companyStorePage/companyStorePage',
        payload: params,
      });
    });
  };

  // 重置
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'companyStorePage/companyStorePage',
      payload: {
        name: '',
        pageIndex: '1',
        pageSize: '10',
      },
    });
  };

  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;

      const values = {
        ...fieldsValue,
      };
      const params = {
        pageIndex: 0,
        pageSize: 10,
        name: values.name,
      };

      dispatch({
        type: 'companyStorePage/companyStorePage',
        payload: params,
      });
    });
  };

  handleEdit = r => {
    const { dispatch } = this.props;
    const { companyId, contractId, companyName, contractTitle } = r;
    dispatch(
      routerRedux.push({
        pathname: '/Enterprise/company-storePage-add',
        query: { companyId, contractId, companyName, contractTitle },
      })
    );
  };

  handleAdd = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/Enterprise/company-storePage-add'));
  };

  reColumns = () => {
    const that = this;
    return [
      {
        title: '企业名称',
        dataIndex: 'companyName',
      },
      {
        title: '合同名称',
        dataIndex: 'contractTitle',
      },
      {
        title: '体检门店',
        dataIndex: 'storeName',
      },
      {
        title: '操作',
        render: (val, record) => <a onClick={() => that.handleEdit(record)}>修改</a>,
      },
    ];
  };

  renderSearchForm = () => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row
          gutter={{
            md: 8,
            lg: 24,
            xl: 48,
          }}
        >
          <Col md={8} sm={24}>
            <FormItem label="企业名称">
              {getFieldDecorator('name')(
                <Input style={{ width: '100%' }} placeholder="请输入企业名称" />
              )}
            </FormItem>
          </Col>
          <Col md={16} sm={24}>
            <div
              style={{
                overflow: 'hidden',
                height: '40px',
                lineHeight: '40px',
              }}
            >
              <span
                style={{
                  float: 'right',
                }}
              >
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button
                  style={{
                    marginLeft: 8,
                  }}
                  onClick={this.handleFormReset}
                >
                  重置
                </Button>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  };

  render() {
    const columns = this.reColumns();
    const {
      companyStorePage: { data },
      loading,
    } = this.props;

    return (
      <PageHeaderLayout>
        <Card bordered={false} style={{ paddingBottom: '20px' }}>
          <div>
            <div className={styles.tableListForm}>{this.renderSearchForm()}</div>
            <div>
              <Button type="primary" icon="plus" onClick={this.handleAdd}>
                新增
              </Button>
            </div>
            <SimpleTable
              selectedRows={false}
              loading={loading}
              data={data}
              columns={columns}
              onSelectRow={false}
              onChange={this.handleStandardTableChange}
              rowKey="key"
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
